<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
</head>
<body>
<div id="appiontmentManage" class="appiontmentManage mainPadding" style="display: none;">    
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20" v-if="isElBreadcrumb">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>电销管理</el-breadcrumb-item>
        <el-breadcrumb-item>邀约来访记录</el-breadcrumb-item>
    </el-breadcrumb>
    <table-uniontabtemplate :param="dataUrlParam" v-else></table-uniontabtemplate>
    <el-row class="marginB20">
        <el-button type="primary" @click="dialogFormVisible = true"><i class="el-icon-menu"></i>选择列</el-button>
        <shiro:hasPermission name="aggregation:appiontmentManager:edit">
            <el-button type="success" @click="toUpdateAppiontment">编辑</el-button>
        </shiro:hasPermission>
        <shiro:hasPermission name="aggregation:appiontmentManager:view">
            <el-button type="warning" @click="viewCustomerInfo">预览客户信息</el-button>
        </shiro:hasPermission>
        <shiro:hasPermission name="aggregation:appiontmentManager:delete">
            <el-button type="danger" @click="deleteAppiontment">删除</el-button>
        </shiro:hasPermission>
        <shiro:hasPermission name="aggregation:appiontmentManager:cancel">
            <el-button type="info" @click="openCancelForm">标记取消</el-button>
        </shiro:hasPermission>
    </el-row>
    <div class="mainSearchBg">
        <div class="mainSearchFormBox">
            <el-form :inline="true" :model="appiontmentSearchForm" class="demo-form-inline mainSearchForm" ref="appiontmentSearchForm">
                <el-form-item label="客户姓名:" class="formItem" prop="cusName">
                    <el-input v-model="appiontmentSearchForm.cusName" placeholder="请输入客户姓名" class="input-with-select"></el-input>
                </el-form-item>
                <!-- <el-form-item label="电销事业部:" class="formItem"  prop="teleDeptId">
                  <el-select v-model="appiontmentSearchForm.teleDeptId" clearable @change="getSaleList" placeholder="电销事业部" filterable>
                    <el-option
                        v-for="item in teleDeptOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="电销组:" class="formItem"  prop="teleGorupId">
                    <el-select v-model="appiontmentSearchForm.teleGorupId" clearable @change="getSaleList" placeholder="电销组" filterable :disabled="isDXZDisabled">
                        <el-option
                            v-for="item in teleGorupOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销顾问:" class="formItem"  prop="teleSaleId">
                    <el-select v-model="appiontmentSearchForm.teleSaleId" clearable placeholder="电销顾问" filterable>
                        <el-option
                            v-for="item in teleSaleOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提交时间:">
                    <el-date-picker v-model="appiontmentSearchForm.startTime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker v-model="appiontmentSearchForm.endTime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-row v-show="isShow">
                    <el-form-item label="考察项目:" class="formItem"  prop="projectId">
                        <el-select v-model="appiontmentSearchForm.projectId" clearable placeholder="考察项目" filterable>
                            <el-option
                                v-for="item in projectOptions"
                                :key="item.id"
                                :label="item.projectName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源类别:" class="formItem"  prop="category">
                        <el-select v-model="appiontmentSearchForm.category" clearable placeholder="资源类别" filterable>
                            <el-option
                                v-for="item in categoryOptions"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="搜索词:" prop="searchWord">
                        <el-input v-model="appiontmentSearchForm.searchWord" placeholder="搜索词" class="input-with-select"></el-input>
                    </el-form-item>
                    <el-form-item label="客户手机号:" class="formItem" prop="cusPhone">
                        <el-input v-model="appiontmentSearchForm.cusPhone" placeholder="请输入客户手机号" class="input-with-select"></el-input>
                    </el-form-item>
                    <el-form-item label="资源ID:">
                        <el-input v-model="appiontmentSearchForm.clueId" placeholder="资源ID"  @keyup.native="number"></el-input>
                    </el-form-item>
                    <el-form-item label="QQ:">
                        <el-input v-model="appiontmentSearchForm.qq" placeholder="QQ" maxLength="20" @keyup.native="number"></el-input>
                    </el-form-item>
                    <el-form-item label="微信:">
                        <el-input v-model="appiontmentSearchForm.wechat" placeholder="微信"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱:">
                        <el-input v-model="appiontmentSearchForm.email" placeholder="邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="是否签约:" prop="isSign">
                        <el-select v-model="appiontmentSearchForm.isSign" clearable placeholder="是否签约">
                            <el-option v-for="item in isSignOptions" :key="item.value" :label="item.name"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否补齐尾款:">
                        <el-select v-model="appiontmentSearchForm.isTailMoney" placeholder="是否补齐尾款" clearable>
                            <el-option v-for="item in isTailMoneyArr" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="邀约状态:">
                        <el-select v-model="appiontmentSearchForm.delFalg" placeholder="邀约状态" clearable>
                            <el-option v-for="item in delFalgArr" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div>
            </el-form>
        </div>
        <el-row>
            <el-table  ref="multipleTable" tooltip-effect="dark" border @selection-change="handleSelectionChange"
                       style="width: 100%"  :data="dataTable" >
                <el-table-column align="center" type="selection" label="全选" width="55"></el-table-column>
                <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
                <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-for="(item,key,index) in tableColums" v-if="item.fieldCode == 'isRepeatPhone'">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isRepeatPhone === 1">
                            <el-button @click="repeatPhonesClick(scope.row)" type="text" size="small">点击查看</el-button>
                        </div>
                        <div v-else></div>
                    </template>
                </el-table-column>
                <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-else-if="item.fieldCode == 'isTrack'">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isTrack === 1">
                            <el-button @click="recordClick(scope.row)" type="text" size="small">点击查看</el-button>
                        </div>
                        <div v-else>无</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width" v-else-if="item.fieldCode == 'cusName'">
                    <template slot-scope="scope">
                        {{scope.row.cusName}}
                        <span v-if="scope.row.inputType ==1">
                <input type='hidden'><img th:src="@{/images/self_build.png}"  style="margin:0 10px;width:22px;cursor: pointer;vertical-align: middle;" alt="">
            </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width"
                                 v-else-if="item.fieldCode == 'cusPhone'" >
                </el-table-column>
                <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName" :width="item.width"
                                 v-else>
                </el-table-column>

            </el-table>
            <table-pagination v-if="paginationShow" :pager="pager" @change="searchCoutentTable"></table-pagination>
        </el-row>
    </div>
    <!-- dialog -->
    <el-dialog title="编辑邀约来访" :visible.sync="appiontmentFormVisible" width="540px">
        <el-form :model="appiontmentForm" ref="appiontmentForm" :rules="appiontmentFormRule">
            <el-form-item label="地区：" :label-width="formLabelWidth" prop="area">
                <el-select v-model="appiontmentForm.area" disabled placeholder="请选择" style="width: 290px;" @change="currentBusGroup" >
                    <el-option
                        v-for="item in areaOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分公司：" :label-width="formLabelWidth" prop="busCompay">
                <el-select v-model="appiontmentForm.busCompay" disabled placeholder="请选择" style="width: 290px;" @change="currentBusSale">
                    <el-option
                        v-for="item in busCompayOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商务总监：" :label-width="formLabelWidth" prop="busDirectorId">
                <el-select v-model="appiontmentForm.busDirectorId" disabled placehold er="请选择" style="width: 290px;">
                    <el-option
                        v-for="item in busDirectorOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="考察项目：" :label-width="formLabelWidth" >
                <el-form-item label="" prop="tasteProjectId">
                    <el-select
                        v-model="appiontmentForm.tasteProjectId"
                        placeholder="考察项目"
                        style="width: 290px;"
                        multiple
                        filterable
                    >
                        <el-option
                            v-for="item in  projectOptions"
                            :key="item.id"
                            :label="item.projectName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form-item>
            <el-form-item label="预约时间：" :label-width="formLabelWidth" prop="reserveTime">
                <el-date-picker
                    style="width: 290px;"
                    v-model="appiontmentForm.reserveTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="备注：" :label-width="formLabelWidth" prop="remark">
                <el-input type="textarea" :rows="2" v-model="appiontmentForm.remark" maxlength="500" style="width: 290px;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :disabled="btnDisabled" @click="saveAppiontment('appiontmentForm')">确 定</el-button>
            <el-button @click="appiontmentFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
    <!-- dialog -->
    <!-- 跟进记录 -->
    <el-dialog title="跟进记录" :visible.sync="recordDialog" width="1000px">
        <el-table
            ref="singleTable"
            tooltip-effect="dark"
            style="width: 100%"
            border
            :data="recordTable"
        >
            <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
            <el-table-column align="center" prop="callTime" label="跟进时间" width="150"></el-table-column>
            <el-table-column align="center" prop="customerStatusName" label="客户状态"  width="100"></el-table-column>
            <el-table-column align="center" prop="isCall" label="是否接通" :formatter="transformIsCall" width="90"></el-table-column>
            <el-table-column align="center" prop="focusPoint" label="客户关注点">
                    <template slot-scope="scope">
                        {{scope.row.callDetailsName}} <span v-if="scope.row.callDetailsName != null && scope.row.callDetailsName != ''">-</span> {{scope.row.focusPoint}}
                    </template>
            </el-table-column>
            <!--<el-table-column align="center" prop="visitStatus" label="是否继续回访" :formatter="transform"></el-table-column>  -->
            <el-table-column align="center" prop="nextVisitTime" label="下次回访时间" width="150"></el-table-column>
            <el-table-column align="center" prop="createUserName" label="创建人" width="130"></el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog :title="'资源ID'+dailogTitleType+'重复手机号资源信息'"    :visible.sync="repeatPhonesDialog" width="1000px">
        <div v-show="showPhoneTable">
            <p style="margin:10px 0;">手机号<span style="color: red">(1)</span>{{phone}}重复手机号资源</p>
            <el-table ref="singleTable" tooltip-effect="dark" style="width: 100%" border :data="repeatPhonesTable">
                <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
                <el-table-column align="center" prop="createTime" label="资源创建时间" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.phase == 1 || scope.row.phase == 2">
                            <font color="red">「重话务」</font>{{scope.row.createTime}}
                        </div>
                        <div v-else>
                            {{scope.row.createTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="phoneChangeTime" label="联系方式创建时间" width="130"></el-table-column>
                <el-table-column align="center" prop="teleDirectorName" label="电销总监" width="130"></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问" width="130"></el-table-column>
                <el-table-column align="center" prop="teleGorupName" label="电销组" width="130"></el-table-column>
                <el-table-column align="center" prop="teleReceiveTime" label="分配时间" width="170">
                    <template slot-scope="scope">
                        <div v-if="scope.row.teleReceiveSource == 1 || scope.row.teleReceiveSource == 2">
                            {{scope.row.teleReceiveTime}}(分配)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===3">
                            {{scope.row.teleReceiveTime}}(领取)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===4">
                            {{scope.row.teleReceiveTime}}(自建)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===5">
                            {{scope.row.teleReceiveTime}}(分发)
                        </div>
                        <div v-else>
                            {{scope.row.teleReceiveTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="fowEndTime" label="最新跟进时间"></el-table-column>
                <el-table-column align="center" prop="fowEndTime" label="最新跟进时间"></el-table-column>
                <el-table-column align="center" prop="teleProject" label="电销组负责项目"></el-table-column>
                <el-table-column align="center" prop="createUserRoleName" label="资源创建人角色" width="130"></el-table-column>
                <el-table-column align="center" prop="createUserName" label="资源创建人" width="110"></el-table-column>
            </el-table>
        </div>
        <div v-show="showPhoneTable2">
            <p style="margin:10px 0;">手机号<span style="color: red">(2)</span>{{phone2}}重复手机号资源</p>
            <el-table ref="singleTable2" tooltip-effect="dark" style="width: 100%" border :data="repeatPhonesTable2">
                <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
                <el-table-column align="center" prop="createTime" label="资源创建时间" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.phase == 1 || scope.row.phase == 2">
                            <font color="red">「重话务」</font>{{scope.row.createTime}}
                        </div>
                        <div v-else>
                            {{scope.row.createTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="phoneChangeTime" label="联系方式创建时间" width="150"></el-table-column>
                <el-table-column align="center" prop="teleDirectorName" label="电销总监" width="130"></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问" width="130"></el-table-column>
                <el-table-column align="center" prop="teleGorupName" label="电销组" width="130"></el-table-column>
                <el-table-column align="center" prop="teleReceiveTime" label="分配时间" width="170">
                    <template slot-scope="scope">
                        <div v-if="scope.row.teleReceiveSource == 1 || scope.row.teleReceiveSource == 2">
                            {{scope.row.teleReceiveTime}}(分配)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===3">
                            {{scope.row.teleReceiveTime}}(领取)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===4">
                            {{scope.row.teleReceiveTime}}(自建)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===5">
                            {{scope.row.teleReceiveTime}}(分发)
                        </div>
                        <div v-else>
                            {{scope.row.teleReceiveTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="fowEndTime" label="最新跟进时间"></el-table-column>
                <el-table-column align="center" prop="teleProject" label="电销组负责项目"></el-table-column>
                <el-table-column align="center" prop="createUserRoleName" label="资源创建人角色" width="130"></el-table-column>
                <el-table-column align="center" prop="createUserName" label="资源创建人" width="110"></el-table-column>
            </el-table>
        </div>
        <div v-show="showPhoneTable3">
            <p style="margin:10px 0;">手机号<span style="color: red">(3)</span>{{phone3}}重复手机号资源</p>
            <el-table ref="singleTable3" tooltip-effect="dark" style="width: 100%" border :data="repeatPhonesTable3">
                <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
                <el-table-column align="center" prop="createTime" label="资源创建时间" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.phase == 1 || scope.row.phase == 2">
                            <font color="red">「重话务」</font>{{scope.row.createTime}}
                        </div>
                        <div v-else>
                            {{scope.row.createTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="phoneChangeTime" label="联系方式创建时间" width="130"></el-table-column>
                <el-table-column align="center" prop="teleDirectorName" label="电销总监" width="130"></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问" width="130"></el-table-column>
                <el-table-column align="center" prop="teleGorupName" label="电销组" width="130"></el-table-column>
                <el-table-column align="center" prop="teleReceiveTime" label="分配时间" width="170">
                    <template slot-scope="scope">
                        <div v-if="scope.row.teleReceiveSource == 1 || scope.row.teleReceiveSource == 2">
                            {{scope.row.teleReceiveTime}}(分配)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===3">
                            {{scope.row.teleReceiveTime}}(领取)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===4">
                            {{scope.row.teleReceiveTime}}(自建)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===5">
                            {{scope.row.teleReceiveTime}}(分发)
                        </div>
                        <div v-else>
                            {{scope.row.teleReceiveTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="fowEndTime" label="最新跟进时间"></el-table-column>
                <el-table-column align="center" prop="teleProject" label="电销组负责项目"></el-table-column>
                <el-table-column align="center" prop="createUserRoleName" label="资源创建人角色" width="130"></el-table-column>
                <el-table-column align="center" prop="createUserName" label="资源创建人" width="110"></el-table-column>
            </el-table>
        </div>
        <div v-show="showPhoneTable4">
            <p style="margin:10px 0;">手机号<span style="color: red">(4)</span>{{phone4}}重复手机号资源</p>
            <el-table ref="singleTable4" tooltip-effect="dark" style="width: 100%" border :data="repeatPhonesTable4">
                <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
                <el-table-column align="center" prop="createTime" label="资源创建时间" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.phase == 1 || scope.row.phase == 2">
                            <font color="red">「重话务」</font>{{scope.row.createTime}}
                        </div>
                        <div v-else>
                            {{scope.row.createTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="phoneChangeTime" label="联系方式创建时间" width="130"></el-table-column>
                <el-table-column align="center" prop="teleDirectorName" label="电销总监" width="130"></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问" width="130"></el-table-column>
                <el-table-column align="center" prop="teleGorupName" label="电销组" width="130"></el-table-column>
                <el-table-column align="center" prop="teleReceiveTime" label="分配时间" width="170">
                    <template slot-scope="scope">
                        <div v-if="scope.row.teleReceiveSource == 1 || scope.row.teleReceiveSource == 2">
                            {{scope.row.teleReceiveTime}}(分配)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===3">
                            {{scope.row.teleReceiveTime}}(领取)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===4">
                            {{scope.row.teleReceiveTime}}(自建)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===5">
                            {{scope.row.teleReceiveTime}}(分发)
                        </div>
                        <div v-else>
                            {{scope.row.teleReceiveTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="fowEndTime" label="最新跟进时间"></el-table-column>
                <el-table-column align="center" prop="teleProject" label="电销组负责项目"></el-table-column>
                <el-table-column align="center" prop="createUserRoleName" label="资源创建人角色" width="130"></el-table-column>
                <el-table-column align="center" prop="createUserName" label="资源创建人" width="110"></el-table-column>
            </el-table>
        </div>
        <div v-show="showPhoneTable5">
            <p style="margin:10px 0;">手机号<span style="color: red">(5)</span>{{phone5}}重复手机号资源</p>
            <el-table ref="singleTable5" tooltip-effect="dark" style="width: 100%" border :data="repeatPhonesTable5">
                <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
                <el-table-column align="center" prop="createTime" label="资源创建时间" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.phase == 1 || scope.row.phase == 2">
                            <font color="red">「重话务」</font>{{scope.row.createTime}}
                        </div>
                        <div v-else>
                            {{scope.row.createTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="phoneChangeTime" label="联系方式创建时间" width="130"></el-table-column>
                <el-table-column align="center" prop="teleDirectorName" label="电销总监" width="130"></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问" width="130"></el-table-column>
                <el-table-column align="center" prop="teleGorupName" label="电销组" width="130"></el-table-column>
                <el-table-column align="center" prop="teleReceiveTime" label="分配时间" width="170">
                    <template slot-scope="scope">
                        <div v-if="scope.row.teleReceiveSource == 1 || scope.row.teleReceiveSource == 2">
                            {{scope.row.teleReceiveTime}}(分配)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===3">
                            {{scope.row.teleReceiveTime}}(领取)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===4">
                            {{scope.row.teleReceiveTime}}(自建)
                        </div>
                        <div v-else-if="scope.row.teleReceiveSource ===5">
                            {{scope.row.teleReceiveTime}}(分发)
                        </div>
                        <div v-else>
                            {{scope.row.teleReceiveTime}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="fowEndTime" label="最新跟进时间"></el-table-column>
                <el-table-column align="center" prop="teleProject" label="电销组负责项目"></el-table-column>
                <el-table-column align="center" prop="createUserRoleName" label="资源创建人角色" width="130"></el-table-column>
                <el-table-column align="center" prop="createUserName" label="资源创建人" width="110"></el-table-column>
            </el-table>
        </div>
    </el-dialog>

    <el-dialog title="自定义列" :visible.sync="dialogFormVisible" class="elCheckboxGroup">
        <el-form :model="form">
            <el-form-item label="" prop="type">
                <el-checkbox-group v-model="form.type">
                    <el-checkbox :label="item.sortNum+'_'+item.fieldCode+'_'+item.displayName+'_'+item.id+'_'+item.width"  name="type" :key="item.fieldCode"  v-for="(item,index) in  allTableColums ">
                        {{item.displayName}}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmColumn">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
    <!-- 释放资源 -->
    <el-dialog title="取消原因"    :visible.sync="cancelFormVisible" width="540px">
        <el-form :model="cancelDigForm" ref="cancelDigForm" :rules="cancelRules">
            <el-row>
                <div class="marginB10" style="padding-left: 150px;">确认标记取消选中的邀约来访？</div>
                <el-form-item label="取消原因：" :label-width="formLabelWidth1" prop="cancelReason">
                    <el-input type="textarea" :rows="3" v-model="cancelDigForm.cancelReason" autocomplete="off" maxlength="100" placeholder="100字" style="width: 80%;"></el-input>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitCancelForm('cancelDigForm')">提 交</el-button>
            <el-button @click="cancelFormVisible= false" >取 消</el-button>
        </div>
    </el-dialog>


</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
  var deptList=[[${deptList}]];//电销事业部
  var orgList=[[${orgList}]];//电销组
  var userList=[[${userList}]];//电销顾问
  var projectList=[[${projectList}]];//考察项目
  var fieldList=[[${fieldList}]];//自定义字段
  var userFieldList=[[${userFieldList}]];//用户自定义字段
  var clueCategoryList=[[${clueCategoryList}]];//资源类别
  var userId = [[${userId}]]+"";
  var roleCode = [[${roleCode}]];
  var orgId = [[${orgId}]]+"";
  var ownOrgId=[[${ownOrgId}]];//电销总监电销组
  var appiontmentVM = new Vue({
    el: '#appiontmentManage',
    data: {
        dataUrlParam:{
            dataUrlArr:[{
                isActive:false,
                name:"未签约客户",
                url:"/tele/clueMyCustomerInfo/initmyCustomer?type=1",                
            },{
                isActive:false,
                name:"今日新增",
                url:"/tele/clueMyCustomerInfo/initmyCustomer?type=2"
            },
            {
                isActive:false,
                name:"今日回访",
                url:"/tele/clueMyCustomerInfo/customerVisitToday"
            },
            {
                isActive:false,
                name:"今日领取",
                url:"/tele/clueMyCustomerInfo/initmyCustomer?type=5"
            },
            {
                isActive:false,
                name:"自建客户",
                url:"/tele/clueMyCustomerInfo/initmyCustomer?type=3"
            },
            {
                isActive:false,
                name:"重单客户",
                url:"/clue/cluerepetition/queryRepeatPage?type=1"
            },
            {
                isActive:true,
                name:"邀约客户",
                url:"/clue/appiontment/initAppiontmentList?type=1"
            },
            {
                isActive:false,
                name:"已签约客户",
                url:" /tele/clueMyCustomerInfo/initmyCustomer?type=4"
            }]
        },
        isElBreadcrumb:true,
      paginationShow: false,
      isShow:false,
      btnDisabled: false,
      isDXZDisabled:false,
      appiontmentSearchForm: {
        delFalg:"",
        startTime: '',
        endTime: '',
        teleDeptId: '',
        teleGorupId:ownOrgId,
        teleSaleId: '',
        category: '',
          searchWord:'',
        projectId: '',
        cusName: '',
        cusPhone:'',
        clueId:'',
        qq:"",
        wechat:"",
        email:"",
        isTailMoney:"",
        isSign:"",
      },
      appiontmentForm: {
        id:'',
        area:'',
        busCompay:'',
        busDirectorId:'',
        tasteProjectId:'',
        reserveTime:'',
        remark:''
      },
      cancelDigForm:{
        cancelReason:'',
      },
      dataTable:[],
      recordTable:[],
      loading: true,
      allTableColums:[],
      tableColums:[],
      dialogFormVisible: false,
      cancelFormVisible:false,
      dailogTitleType:'',
      form: {
        type: [],
      },
      repeatPhonesTable:[],
      repeatPhonesTable2:[],
      repeatPhonesTable3:[],
      repeatPhonesTable4:[],
      repeatPhonesTable5:[],
      showPhoneTable:false,
      showPhoneTable2:false,
      showPhoneTable3:false,
      showPhoneTable4:false,
      showPhoneTable5:false,
      phone:'',
      phone2:'',
      phone3:'',
      phone4:'',
      phone5:'',
      teleDeptOptions:deptList,
      teleGorupOptions:orgList,
      teleSaleOptions:userList,
      projectOptions:projectList,
      categoryOptions:clueCategoryList,
      areaOptions:[],
      busCompayOptions:[],
      busDirectorOptions:[],
      appiontmentFormVisible: false,
      recordDialog:false,
      repeatPhonesDialog:false,
      pager:{
        total: 0,
        currentPage: 1,
        pageSize: 20,
      },
      multipleSelection:[],
      formLabelWidth: '120px',
      formLabelWidth1: '150px',
      cancelRules:{
        cancelReason: [
          { required: true, message: '请填写取消原因', trigger: 'blur' }
        ]
      },
      appiontmentFormRule:{
        tasteProjectId: [
          { required: true, message: '考察项目不能为空', trigger: 'change' }
        ],
        reserveTime: [
          { required: true, message: '预约时间不能为空', trigger: 'change' }
        ]
      },
      isTailMoneyArr: [{value: '', label: '全部'}, {value: '0', label: '否'}, {value: '1', label: '是'}],
      delFalgArr: [{value: '-1', label: '全部'}, {value: '0', label: '正常'}, {value: '1', label: '删除'}, {value: '2', label: '取消'}],
      isSignOptions: [{
        value: 0,
        name: "未签约"
      }, {
        value: 1,
        name: "已签约"
      }],
      storeForm: {
        startTime: '',
        endTime: '',
        teleDeptId: '',
        teleGorupId:ownOrgId,
        teleSaleId: '',
        projectId: '',
        cusName: '',
        cusPhone:'',
        clueId:'',
        qq:"",
        wechat:"",
        email:"",
      },
      storeId: '',
      scrollTop: 0,
    },
    methods: {
      transCusPhone(row) {
        var text="";
        if((roleCode =='DXCYGW' && (row.teleSaleId+"") != userId) ||  (roleCode =='DXZJ' && orgId !=(row.teleGorupId+"")) || row.phase ==7){
          text ="***"
        }else{
          text = row.cusPhone;
        }
        return text;
      },
        transDelFlag(row) {
            var text="";
            if(row.delFlag ==0){
                text = "正常";
            }else if(row.delFlag ==1){
                text = "删除";
            }else if(row.delFlag ==2){
                text = "取消";
            }
            return text;
        },

        searchTable(){
            this.pager.currentPage = 1;
            this.searchCoutentTable();
        },
        searchCoutentTable() {
        var param ={};

        var startTime = this.appiontmentSearchForm.startTime;
        var endTime = this.appiontmentSearchForm.endTime;
        if(startTime&&endTime&&startTime> endTime){
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'warning'
          });
          return;
        }
        param.startTime = startTime;
        param.endTime = endTime;
        param.pageSize = this.pager.pageSize;
        param.pageNum = this.pager.currentPage;
        param.teleGorupId = this.appiontmentSearchForm.teleGorupId;
        param.teleDeptId = this.appiontmentSearchForm.teleDeptId;
        param.teleSaleId = this.appiontmentSearchForm.teleSaleId;
        param.tasteProjectId = this.appiontmentSearchForm.projectId;
        param.cusName = this.appiontmentSearchForm.cusName;
        param.cusPhone = this.appiontmentSearchForm.cusPhone;
        param.clueId = this.appiontmentSearchForm.clueId;
        param.qq = this.appiontmentSearchForm.qq;
        param.email = this.appiontmentSearchForm.email;
        param.wechat = this.appiontmentSearchForm.wechat;
        param.isSign = this.appiontmentSearchForm.isSign;
        param.isTailMoney = this.appiontmentSearchForm.isTailMoney;
        param.category = this.appiontmentSearchForm.category;
        param.searchWord = this.appiontmentSearchForm.searchWord;
        param.delFalg = this.appiontmentSearchForm.delFalg;
        console.info(param);
        axios.post('/clue/appiontment/list', param)
        .then(function (response) {
          var result =  response.data;
          console.info(result);
          var table=result.data;
          var data= table.data;
          for(var i=0;i<data.length;i++){
            data[i].isSign=appiontmentVM.transformSign(data[i].isSign);
            data[i].tasteProjectId=appiontmentVM.transformProject(data[i].tasteProjectId);
            data[i].arrivalTime=appiontmentVM.dateFormat(data[i].arrivalTime);
            data[i].departTime=appiontmentVM.dateFormat(data[i].departTime);
            data[i].pickUpTime=appiontmentVM.dateFormat(data[i].pickUpTime);
            data[i].reserveTime=appiontmentVM.dateFormat(data[i].reserveTime);
            data[i].category=appiontmentVM.transformCategory(data[i].category);
            data[i].visitStatus=appiontmentVM.transformVisitStatus(data[i].visitStatus);
            data[i].delFalg=appiontmentVM.transformDelFalg(data[i].delFalg);
            data[i].cusPhone=appiontmentVM.transCusPhone(data[i]);
          }
          appiontmentVM.dataTable= data;

          appiontmentVM.pager.total =  table.total;
          appiontmentVM.pager.currentPage = table.currentPage;

          // 取出存储的id
          if(!appiontmentVM.paginationShow){
            if(appiontmentVM.storeId){
              appiontmentVM.$nextTick(function(){
                var storage = [];
                appiontmentVM.dataTable.forEach(function(item, index){
                  if(item.clueId === appiontmentVM.storeId ){
                    storage.push(appiontmentVM.dataTable[index]);
                  }
                })
                appiontmentVM.toggleSelection(storage);

                appiontmentVM.$el.querySelector('.el-table__body-wrapper').scrollTop = appiontmentVM.scrollTop;

              })
            }
          }else{
            removeSessionStore ("appiontmentManagerStoreForm");
            removeSessionStore ("appiontmentManagerOtherVal");
          }
          appiontmentVM.paginationShow = true;
          appiontmentVM.storeForm = appiontmentVM.appiontmentSearchForm;
        })
        .catch(function (error) {
          console.log(error);
        });

      },
      toggleSelection(rows) { // table select 默认选中fn
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row,true);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //选择行
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //跳转修改邀约来访页
      toUpdateAppiontment() {
        var rows = this.multipleSelection;
        if(rows.length!=1){
          this.$message({
            message: '请选择一条数据进行修改',
            type: 'warning'
          });
          return;
        }
        var param={id:rows[0].id};
        appiontmentVM.appiontmentForm.id= rows[0].id;
        //根据id获取数据
        axios.post('/clue/appiontment/getAppiontment',param)
        .then(function (response) {
          var data =  response.data;
          if(data.code=='0'){
            if(data.data.isAllocate==1){
              appiontmentVM.$message({
                message: '此客户资源商务已经在跟进不可编辑',
                type: 'warning'
              });
              return;
            }
            appiontmentVM.currentBusGroup(data.data.area);
            appiontmentVM.currentBusSale(data.data.busCompay);
            appiontmentVM.appiontmentForm.area= data.data.area;
            appiontmentVM.appiontmentForm.busCompay= data.data.busCompay;
            appiontmentVM.appiontmentForm.busDirectorId= data.data.busDirectorId;
            appiontmentVM.appiontmentForm.reserveTime= data.data.reserveTime;
            appiontmentVM.appiontmentForm.tasteProjectId= data.data.tasteProjectId.split(",");
            appiontmentVM.appiontmentForm.remark= data.data.remark;
            appiontmentVM.appiontmentFormVisible = true;
          }else{
            console.error(data);
          }
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
        });

      },
      handleSizeChange(val) {
        //下拉框  每页 10,20条切换 调用
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.initTableData(1);
      },
      handleCurrentChange(val) {
        //点击 页码
        console.log(`当前页: ${val}`);
        this.initTableData(val);
      },
      cancelForm(formName) {
        if (this.$refs[formName]!==undefined) {
          this.$refs[formName].resetFields();
        }
        this.appiontmentFormVisible = false;
      },
      //日期数据格式化方法
      dateFormat(cellValue) {
        if (cellValue == undefined) {
          return "";
        }
        return moment(cellValue).format("YYYY-MM-DD HH:mm");
      },
      //类别转换方法
      transformCategory(cellValue) {
        var text="";
        if(clueCategoryList){
          for(var i=0;i<clueCategoryList.length;i++){
            if(cellValue==clueCategoryList[i].value){
              text=clueCategoryList[i].name;
            }
          }
        }
        return text;
      },
      //到访情况转换方法
      transformVisitStatus(cellValue) {
        var text="";
        if(cellValue==-1){
          text="待处理"
        }else if(cellValue==0){
          text="未到访"
        }else if(cellValue==1){
          text="首次到访"
        }else if(cellValue==2){
          text="2次到访"
        }else if(cellValue==3){
          text="多次到访"
        }
        return text;
      },
      //邀约来访状态转换方法
      transformDelFalg(cellValue) {
        var text="";
        if(cellValue==0 || cellValue == null){
          text="正常"
        }else if(cellValue==1){
          text="已删除"
        }else if(cellValue==2){
          text="取消"
        }
        return text;
      },
      //是否签约状态转换方法
      transformSign(cellValue) {
        var text="";
        if(cellValue==0){
          text="否"
        }else if(cellValue==1){
          text="是"
        }
        return text;
      },
      //是否转换方法
      transform(row, column, cellValue, index) {
        var text="";
        if(cellValue==0){
          text="否"
        }else if(cellValue==1){
          text="是"
        }
        return text;
      },
      //是否接通(0未接通,1已接通)转换方法
      transformIsCall(row, column, cellValue, index) {
        var text="";
        if(cellValue==0){
          text="未接通"
        }else if(cellValue==1){
          text="接通/微信沟通"
        }
        return text;
      },
      //资源有效性(0：无效资源，1有效资源)转换方法
      transformResource(row, column, cellValue, index) {
        var text="";
        if(cellValue==0){
          text="无效资源"
        }else if(cellValue==1){
          text="有效资源"
        }
        return text;
      },
      //考察项目转换方法
      transformProject(cellValue) {
        var text="";
        if(projectList&&cellValue){
          var array=cellValue.split(",");
          for(var i=0;i<array.length;i++){
            for(var j=0;j<projectList.length;j++){
              if(array[i]==projectList[j].id){
                if(i==0){
                  text=projectList[j].projectName;
                }else{
                  text=text+","+projectList[j].projectName;
                }
              }
            }
          }
        }
        return text;
      },
      //查询地区（商务中心）
      currentBusArea(){
        var param={};
        param.orgType="11";
        axios.post('/organization/organization/queryOrgByType',param).then(function (response) {
          appiontmentVM.areaOptions=response.data.data;
        });
      },
      //查询分公司（商务组）
      currentBusGroup(seleVal){
        param={};
        param.parentId=seleVal;
        param.orgType="2";
        axios.post('/organization/organization/queryOrgByType',param).then(function (response) {
          appiontmentVM.busCompayOptions=response.data.data;
        });
      },
      //查询商务总监
      currentBusSale(seleVal){
        param={};
        param.orgId=seleVal;
        param.roleCode="SWZJ";
        axios.post('/user/userManager/listByOrgAndRole' ,param).then(function (response) {
          appiontmentVM.busDirectorOptions=response.data.data;
        });
      },
      saveAppiontment(formName){//保存自定义字段
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var param=appiontmentVM.appiontmentForm;
            param.tasteProjectId=appiontmentVM.appiontmentForm.tasteProjectId.join(',');
            var url="/clue/appiontment/updateAppiontment";

            this.btnDisabled = true;

            axios.post(url, param).then(function (response) {
              var resData = response.data;
              if(resData.code=='0'){
                appiontmentVM.cancelForm(formName);
                appiontmentVM.$message({message:'操作成功',type:'success',duration:1000,onClose:function(){
                    appiontmentVM.btnDisabled = false;
                    appiontmentVM.searchTable();
                  }});
              }else{
                appiontmentVM.$message('操作失败');
                appiontmentVM.btnDisabled = false;
              }
            })
            .catch(function (error) {
              console.log(error);
              appiontmentVM.btnDisabled = false;
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //打开取消邀约对话框
      openCancelForm() {
        var rows = this.multipleSelection;
        if(rows.length==0){
          this.$message({
            message: '请选择邀约数据进行取消',
            type: 'warning'
          });
          return;
        }
        var rowIds = [];
        for(var i=0;i<rows.length;i++){
          var curRow = rows[i];
          if(curRow.delFalg =="已删除"){
            appiontmentVM.$message({message: "选择邀约信息包含已删除邀约，不允许标记取消操作",type: 'warning'});
            return;
          }
          if(curRow.delFalg =="已取消"){
            appiontmentVM.$message({message: "选择邀约信息包含已取消邀约，不允许标记取消操作",type: 'warning'});
            return;
          }
          rowIds.push(curRow.id);
        }
        if(this.$refs['cancelDigForm']) {
          this.$refs['cancelDigForm'].resetFields();
        }
        this.cancelForm.cancelReason="";
        this.cancelFormVisible=true;
        /*  var param  = {cancelIdList:rowIds};
         axios.post('/clue/appiontment/findCancelList',param)
         .then(function (response) {
           var data =  response.data;
           if(data.code=='0'){
             if(null!=data.data&&data.data.length>0){
               appiontmentVM.$message({
                 message: "当前选中的邀约来访记录已经填写有效的到访记录或已经提交签约单,不可取消邀约",
                 type: 'error'
               });
               return  ;
             }

           }else{

           }
         })
         .catch(function (error) {
           console.log(error);
         }).then(function () {

         }); */

      },
      //取消邀约数据
      submitCancelForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var rows = this.multipleSelection;
            if(rows.length==0){
              this.$message({
                message: '请选择邀约数据进行取消',
                type: 'warning'
              });
              return;
            }
            var rowIds = [];
            for(var i=0;i<rows.length;i++){
              var curRow = rows[i];
              rowIds.push(curRow.id);
            }
            var reason= appiontmentVM.cancelForm.cancelReason;
            this.$confirm('确定要取消选中的邀约来访吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //删除
              var param  = {cancelIdList:rowIds,cancelReason:reason};
              axios.post('/clue/appiontment/cancelAppiontment',param)
              .then(function (response) {
                var data =  response.data;
                if(data.code=='0'){
                  appiontmentVM.$message({message:'取消成功',type:'success',duration:1000,onClose:function(){
                      appiontmentVM.cancelFormVisible=false;
                      appiontmentVM.searchTable();
                    }});
                }else{
                  appiontmentVM.$message({
                    message: "接口调用失败",
                    type: 'error'
                  });
                }
              })
              .catch(function (error) {
                console.log(error);
              })
              .then(function () {

              });
            }).catch(() => {

            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },//end
      deleteAppiontment() {
        var rows = this.multipleSelection;
        if(rows.length==0){
          this.$message({
            message: '请选择一条数据进行刪除',
            type: 'warning'
          });
          return;
        }


        var rowIds = [];
        for(var i=0;i<rows.length;i++){
          var curRow = rows[i];
          if(curRow.delFalg =="已删除"){
            appiontmentVM.$message({message: "选择邀约信息包含已删除邀约，不允许进行重复删除操作",type: 'warning'});
            return;
          }
          if(curRow.isAllocate==1){
            appiontmentVM.$message({message: "选择邀约信息已经分配给商务经理，不允许进行删除操作",type: 'warning'});
            return;
          }

          rowIds.push(curRow.id);
        }

        this.$confirm('确定要删除选中的邀约来访吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //删除
          var param  = {idList:rowIds};
          axios.post('/clue/appiontment/deleteAppiontment',param)
          .then(function (response) {
            var data =  response.data;
            if(data.code=='0'){
              appiontmentVM.$message({message:'删除成功',type:'success',duration:1000,onClose:function(){
                  appiontmentVM.searchTable();
                }});
            }else{
              appiontmentVM.$message({
                message: "接口调用失败",
                type: 'error'
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {

          });
        }).catch(() => {

        });
      },//end
      //根据电销组查询电销顾问
      getSaleList() {
        var param ={};
        var orgId=this.appiontmentSearchForm.teleGorupId
        if(orgId){
          param.orgId = orgId;
          console.info(param);
          axios.post('/clue/appiontment/getSaleList', param)
          .then(function (response) {
            var result =  response.data;
            console.info(result);
            var table=result.data;
            appiontmentVM.teleSaleOptions= table;
          })
          .catch(function (error) {
            console.log(error);
          });
        }else{
          this.teleSaleOptions=[];
        }

      },
      //查看跟进记录
      recordClick(row) {
        var param ={};
        param.clueId = row.clueId;
        console.info(param);
        axios.post('/aggregation/tracking/queryList', param)
        .then(function (response) {
          var result =  response.data;
          console.info(result);
          appiontmentVM.recordTable= result.data;
          appiontmentVM.recordDialog=true;
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      //预览客户信息
      viewCustomerInfo() {
        var rows = this.multipleSelection;
        if(rows.length!=1){
          this.$message({
            message: '请选择一条数据进行预览',
            type: 'warning'
          });
          return;
        }
        if((roleCode =='DXCYGW' && (rows[0].teleSaleId+"") != userId) ||  (roleCode =='DXZJ' && orgId !=(rows[0].teleGorupId+"")) || rows[0].phase ==7){
          this.$message({
            message: "当前资源已释放到公有池，不允许进行详细信息的查看",
            type: 'error'
          });
          return;
        }
        // 存储选中信息--start
        var clueId=rows[0].clueId;
        setSessionStore("appiontmentManagerStoreForm", this.storeForm);
        var otherVal = {
          "currentPage": this.pager.currentPage,
          "clueId": clueId,
          "scrollTop": this.$el.querySelector('.el-table__body-wrapper').scrollTop
        }
        setSessionStore("appiontmentManagerOtherVal", otherVal);
        // 存储选中信息--end
        window.location.href="/tele/clueMyCustomerInfo/customerInfoReadOnly?clueId="+clueId;
      },
      //查看重复手机号资源
      repeatPhonesClick(row) {
        this.dailogTitleType=row.clueId;
        this.repeatPhonesTable=[];
        var param ={};
        param.id = row.clueId;
        param.cusPhone = row.phone;
        param.clueId = row.clueId;
        if( (roleCode =='DXZJ' && orgId !=(row.teleGorupId+"")) || row.phase ==7){
          this.$message({
            message: "当前资源已释放到公有池，不允许进行重复手机号资源的查看",
            type: 'error'
          });
          return;
        }
        //电销顾问角色
        if((roleCode =='DXCYGW' && (row.teleSaleId+"") != userId)){
          this.$message({
            message:'此资源已经被转给其他顾问，您不可再进行详细信息查看',
            type:'error'
          });
          return;
        }

        this.repeatPhonesDialog=true;
        // axios.post('/clue/appiontment/repeatPhonelist', param)
        axios.post('/clue/appiontment/repeatPhoneMap', param).then(function (response) {
          // var result =  response.data;
          // var table=result.data;
          // appiontmentVM.repeatPhonesTable=table;
          var map = response.data.data;
          if(map.phone){
            appiontmentVM.phone = map.phones[0]
            appiontmentVM.repeatPhonesTable=map.phone;
            appiontmentVM.showPhoneTable = true;
          }else{
            appiontmentVM.phone = '';
            appiontmentVM.repeatPhonesTable=[];
            appiontmentVM.showPhoneTable = false;
          }
          if(map.phone2){
            appiontmentVM.phone2 = map.phones[1]
            appiontmentVM.repeatPhonesTable2=map.phone2;
            appiontmentVM.showPhoneTable2 = true;
          }else{
            appiontmentVM.phone2 ='';
            appiontmentVM.repeatPhonesTable2=[];
            appiontmentVM.showPhoneTable2 = false;
          }
          if(map.phone3){
            appiontmentVM.phone3 = map.phones[2]
            appiontmentVM.repeatPhonesTable3=map.phone3;
            appiontmentVM.showPhoneTable3 = true;
          }else{
            appiontmentVM.phone3 = '';
            appiontmentVM.repeatPhonesTable3=[];
            appiontmentVM.showPhoneTable3 = false;
          }
          if(map.phone4){
            appiontmentVM.phone4 = map.phones[3]
            appiontmentVM.repeatPhonesTable4=map.phone4;
            appiontmentVM.showPhoneTable4 = true;
          }else{
            appiontmentVM.phone4 = ''
            appiontmentVM.repeatPhonesTable4=[];
            appiontmentVM.showPhoneTable4 = false;
          }
          if(map.phone5){
            appiontmentVM.phone5 = map.phones[4]
            appiontmentVM.repeatPhonesTable5=map.phone5;
            appiontmentVM.showPhoneTable5 = true;
          }else{
            appiontmentVM.phone5 = map.phones[4]
            appiontmentVM.repeatPhonesTable5=[];
            appiontmentVM.showPhoneTable5 = false;
          }
          appiontmentVM.repeatPhonesDialog=true;
        })  .catch(function (error) {
          console.log(error);
        });
      },
      confirmColumn(){
        //处理用户选择的列
        console.info(this.form.type);
        if(this.form.type.length==0){
          this.$message({
            message: "请至少保留一列",
            type: 'error'
          });
          return;
        }
        this.dialogFormVisible = false;
        var customerShowColun = [];
        var customerColumn = this.form.type;
        customerColumn.sort(this.sortNumber);//对选择的列排序
        var idList=[];
        for(var i=0;i<customerColumn.length;i++){
          var curItem = customerColumn[i];
          var itemArr = curItem.split("_");
          var obj = {};
          obj.fieldCode=itemArr[1];
          obj.displayName=itemArr[2];
          obj.width=itemArr[4];
          customerShowColun.push(obj);
          idList.push(itemArr[3])
        }
        this.tableColums = customerShowColun;
        var param ={};
        param.fieldIdList = idList;
        param.menuCode = "aggregation:appiontmentManager";
        console.info(param);
        if(idList.length!=0){
          axios.post('/customfield/customField/saveUserField', param)
          .then(function (response) {

          })
          .catch(function (error) {
            console.log(error);
          });
        }
      },
      initColumn(){
        //初始化table 列 和 用户自定义列
        this.allTableColums = fieldList;
        if(userFieldList.length!=0){
          var type=[];
          for(var i=0;i<userFieldList.length;i++){
            type.push(userFieldList[i].sortNum+'_'+userFieldList[i].fieldCode+'_'+userFieldList[i].displayName+'_'+userFieldList[i].fieldId+'_'+userFieldList[i].width)
          }
          this.form.type = type;
          this.confirmColumn();
        }else{
          var type=[];
          for(var i=0;i<fieldList.length;i++){
            type.push(fieldList[i].sortNum+'_'+fieldList[i].fieldCode+'_'+fieldList[i].displayName+'_'+fieldList[i].id+'_'+fieldList[i].width)
          }
          this.form.type = type;
          this.confirmColumn();
        }

      },
      sortNumber(a,b) {
        //对数组中元素，按照数字 从小到大 排序
        return a.split("_")[0] - b.split("_")[0];
      },
      toogleClick(){
        if(this.isShow){
          this.isShow=false
        }else{
          this.isShow=true
        }
      },
    },
    created(){
      console.info("create method");
      // 进入页面判断有是否有存储值
      if(!this.paginationShow){
        var storeVal = getSessionStore("appiontmentManagerStoreForm");
        var otherVal = getSessionStore("appiontmentManagerOtherVal");
        if(storeVal && otherVal){
          this.appiontmentSearchForm = storeVal;
          this.$set(this.pager,"currentPage",otherVal.currentPage);
          this.storeId = otherVal.clueId;
          this.scrollTop = otherVal.scrollTop;
        }
      };
      // 取页数存储
      var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
      if(localVal){this.pager.pageSize = localVal;}
      if(ownOrgId){
        this.isDXZDisabled= true;
        var param ={};
          param.orgId = ownOrgId;
          console.info(param);
          axios.post('/clue/appiontment/getSaleList', param)
          .then(function (response) {
            var result =  response.data;
            console.info(result);
            var table=result.data;
            appiontmentVM.teleSaleOptions= table;
          })
          .catch(function (error) {
            console.log(error);
          });
      }//电销总监电销组筛选按钮不可点击
      this.initColumn();
      this.searchTable();
      this.currentBusArea();
        // 判断是否显示面包屑
        var type=getQueryString("type");
        if(type==1){
            // 隐藏面包屑
            this.isElBreadcrumb=false;
        }

    },
    mounted(){
      console.info("mounted method");
      document.getElementById('appiontmentManage').style.display = 'block';
    }
  })

</script>
</html>